<template>
	<popup-bottom :show="show" @close="closeSkuBox">
		<view class="sku-box">
			<image class="back-img" src="https://pd.pdaxiang.com/upload/static/index/back.png" @click="closeSkuBox">
			</image>
			<view class="sku-header container">
				<image class="goods-img" :src="selectSkuInfo[cbImage]"></image>
				<view class="sku-goods-info">
					<view class="gname">
						{{goodsData.title}}
					</view>
					<!-- <view class="stock fs-24">库存{{ selectSkuInfo[cbStock] }}件</view> -->
					<view class="money" :style="{ color: themeColor }">
						<text class="symbol fs-26"></text>
						<text class="amount fs-38"
							style="color: #FF2300;">￥{{ selectSkuInfo[cbPrice] | toFixed2 }}</text>
					</view>
					<view class="fs-24">
						<text>大王币：x {{selectSkuInfo[cbIntegral]}}</text>
						<view>已选："<text v-for="(item,index) in yixuan" :key="index">{{ item.attr_name }}</text>"</view>
					</view>
				</view>
			</view>
			<scroll-view class="sku-list" scroll-y="true">
				<view class="sku-item container" v-for="(sku, sIndex) in mySpecifications" :key="sku[speId]">
					<view class="sku-name">{{ sku.attr_group_name }}</view>
					<view class="sku-content">
						<text class="sku-content-item" v-for="(item, index) in sku.attr_list" :key="index" :style="{
								borderColor: index == sku.sidx ? '#FFCD12' : '',
								color: index == sku.sidx ? '#FFCD12' : '',
								backgroundColor: index == sku.sidx ? 'white' : '#f5f5f5'
							}" @click.stop="selectSku(sIndex, index, item)">
							{{ item.attr_name }}
						</text>
					</view>
				</view>
			</scroll-view>
			<view class="sku-item container count">
				<view class="sku-name">数量</view>
				<view class="count-box">
					<text class="minus" :class="{ disabled: buyCount <= 1 }" @click="handleBuyCount('minus')">-</text>
					<input class="count-content" v-model="buyCount" :disabled="selectSkuInfo[cbStock] <= 0" />
					<text class="add" :class="{ disabled: buyCount >= selectSkuInfo[cbStock] }"
						@click="handleBuyCount('add')">+</text>
				</view>
			</view>
			<view class="confirm-btn  flex-c-c">
				<!-- <view class="block1 flex-c-c" style="color: #333;"  @click="handleConfirm(1)">
					现金支付
				</view> -->
				<view class="block2 flex-c-c" style="color: #fff;" @click="handleConfirm(2)">
					大王币支付
				</view>
			</view>
		</view>
	</popup-bottom>
</template>

<script>
	import PopupBottom from './popup-bottom';
	export default {
		components: {
			PopupBottom
		},
		filters: {
			toFixed2: function(value) {
				if (!value) return '0.00';
				return Number(value).toFixed(2);
			}
		},
		props: {
			walletData: {
				type: Object,
				default () {
					return [];
				}
			},
			show: {
				type: Boolean,
				default: false
			},
			themeColor: {
				type: String,
				default: '#1ac792'
			},
			goodsData: {
				type: Object,
				default () {
					return [];
				}
			},
			combinations: {
				type: Array,
				default () {
					return [];
				}
			},
			specifications: {
				type: Array,
				default () {
					return [];
				}
			},
			defaultSelectIndex: {
				type: Number,
				default: 0
			},
			mjstatus: {
				type: Number,
				default: 0
			},
			combinationsProps: {
				type: Object,
				default () {
					return {
						id: 'id',
						value: 'value',
						image: 'image',
						price: 'price',
						stock: 'stock'
					};
				}
			},
			specificationsProps: {
				type: Object,
				default () {
					return {
						id: 'id',
						list: 'list',
						name: 'name'
					};
				}
			}
		},
		data() {
			return {
				buyCount: 1,
				selectedIndex: 0,
				borderWidth: uni.upx2px(2),
				mySpecifications: [],
				selectSkuInfo: {},
				idarr: [],
				idlist: [],
				status: this.mjstatus,
				sku_id: "",
				yixuan: []
			};
		},
		watch: {
			specifications(val) {
				this.initSkuData();
			}
		},
		computed: {
			speId() {
				return this.specificationsProps.id;
			},
			speList() {
				return this.specificationsProps.list;
			},
			speName() {
				return this.specificationsProps.name;
			},
			cbValue() {
				return this.combinationsProps.value;
			},
			cbIntegral() {
				return this.combinationsProps.integral;
			},
			cbImage() {
				return this.combinationsProps.image;
			},
			cbPrice() {
				return this.combinationsProps.price;
			},
			cbStock() {
				return this.combinationsProps.stock;
			}
		},
		created() {
			if (this.specifications.length) {
				this.initSkuData();
			}
		},
		methods: {
			initSkuData() {
				this.selectedIndex = this.defaultSelectIndex;
				this.selectSkuInfo = this.combinations[this.selectedIndex];
				this.mySpecifications = this.specifications;
				var guige = [];
				this.idlist = [];
				this.mySpecifications.forEach((item, idx) => {
					//默认第一个
					this.$set(this.mySpecifications[idx], 'sidx', 0);
					item.attr_list.forEach((item3, idx3) => {
						if (idx3 == 0) {
							this.$set(item3, 'selected', true);
						}
					})
				});
				this.selectSku(0, 0)

			},
			selectSku(sIndex, index) {
				this.idlist = [];
				//选中
				this.$set(this.mySpecifications[sIndex], 'sidx', index);
				//购物车逻辑
				this.mySpecifications[sIndex].attr_list.forEach((items, idx) => {
					if (idx === index) {
						this.$set(items, 'selected', true);
					} else {
						this.$set(items, 'selected', false);
					}
				});
				var guige = [];
				this.mySpecifications.forEach((item2, idx2) => {
					item2.attr_list.forEach((item3, idx3) => {
						if (item3.selected === true) {
							guige.push(item3);
							this.idlist.push(item3.attr_id);
						}
					});
				});
				var idlist2 = this.idlist.toString();
				this.goodsData.attr.forEach((itm, ids) => {
					if (idlist2 == itm.combination) {
						this.$set(this.combinations[0], 'skuPrice', itm.price);
						this.$set(this.combinations[0], 'skuIntegral', itm.integral);
						this.$set(this.combinations[0], 'skuImage', itm.pic);
						this.$set(this.combinations[0], 'combination', itm.combination);
						this.yixuan = itm.attr_list
					}
				});
			},
			handleBuyCount(type) {
				if (type === 'minus') {
					// if (this.buyCount <= 1) return;
					if (this.buyCount == 1) {
						this.buyCount = 1
						return
					}
					this.buyCount = this.buyCount * 1 - 1;
				}
				if (type === 'add') {
					// if (this.buyCount >= this.selectSkuInfo[this.cbStock]) return;
					this.buyCount = this.buyCount * 1 + 1;
				}
			},
			closeSkuBox() {
				this.$emit('close');
			},
			handleConfirm(is) {
				const result = this.selectSkuInfo;
				result.count = this.buyCount * 1;
				result.sku_id = this.sku_id
				this.$emit('confirm', {
					result: result,
					is: is
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-center {
		display: flex;
		align-items: center;
	}

	.flex-center-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	$font-color-light: #999999;
	$page-bg-color-grey: #f5f5f5;

	.fs-24 {
		min-width: 400rpx;
		font-size: 24upx;
		display: flex;
		justify-content: space-between;
	}

	.fs-26 {
		font-size: 26upx;
	}

	.fs-38 {
		font-size: 38upx;
	}

	.container {
		width: 690upx;
		margin: 0 auto;
	}

	.sku-box {
		min-height: 500upx;
		background-color: white;
		padding-bottom: 20upx;
		font-size: 28upx;
		color: #333333;
		position: relative;
		border-radius: 20rpx 20rpx 0 0;

		.back-img {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 10rpx;
			top: 4rpx;
		}

		.sku-header {
			display: flex;
			padding: 40upx 0 20upx;

			.goods-img {
				width: 200upx;
				height: 200upx;
				border-radius: 6upx;
				border: 4upx solid white;
				flex: none;
				// margin-top: -80upx;
				background: #FFFFFF;
			}
		}

		.sku-goods-info {
			margin-left: 20upx;

			.gname {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
			}

			.money {
				border: none;
				padding-bottom: 0;
			}

			.stock {
				color: $font-color-light;
			}
		}

		.sku-list {
			max-height: 600upx;
		}

		.sku-item {
			padding: 10upx 0;

			.sku-name {
				font-size: 30upx;
			}

			.sku-content {
				border-bottom: 2upx solid $page-bg-color-grey;
				padding: 20upx 0;
				@extend .flex-center;
				flex-wrap: wrap;

				.sku-content-item {
					padding: 16upx 20upx;
					border-radius: 6upx;
					margin: 0 30upx 20upx 0;
					border: 2upx solid transparent;
				}
			}

			&.count {
				@extend .flex-center;
				justify-content: space-between;

				.count-box {
					@extend .flex-center;

					text,
					.count-content {
						@extend .flex-center-center;
						width: 70upx;
						height: 70upx;
						font-size: 32upx;
						border: 2upx solid $page-bg-color-grey;
						margin-top: 10rpx;
					}

					.add,
					.minus {
						font-size: 44upx;
					}

					.count-content {
						border-width: 2upx 0;
						text-align: center;
					}
				}
			}
		}

		.confirm-btn {
			// @extend .flex-center-center;
			display: flex;
			// justify-content: space-between;
			padding: 0 80upx;
			height: 80upx;
			border-radius: 10upx;
			color: white;
			font-size: 32upx;
			margin-top: 10upx;
			display: flex;

			.block1 {
				width: 277rpx;
				height: 74rpx;
				background: #27438B;
				border-radius: 10rpx;
			}

			.block2 {
				width: 477rpx;
				height: 74rpx;
				background: #485CBC;
				border-radius: 48px;
			}
		}
	}

	[class*='disabled'] {
		color: $font-color-light;
		opacity: 0.7;
	}
</style>
